<template>
  <div class="approvals-container">
    <div class="app-container">
      <el-card>
        <div>
          <span>员工列表</span>
          <el-button style="float: right; padding: 3px 0" type="text">新增员工</el-button>
        </div>
      </el-card>
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="50" type="index" :index="1" align="center" />
          <el-table-column prop="name" label="姓名" width="160" align="center" />
          <el-table-column prop="age" label="年龄" width="120" align="center" />
          <el-table-column prop="sex" label="性别" width="120" align="center" />
          <el-table-column prop="name" label="联系方式" width="180" align="center" />
          <el-table-column prop="job" label="职位" width="180" align="center" />
          <el-table-column prop="date" label="入职时间" width="180" align="center" />
          <el-table-column prop="address" label="地址" width="300" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        :current-page="4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      />
      <!-- @size-change="handleSizeChange"
        @current-change="handleCurrentChange" -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Approvals',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: '男',
          age: 18,
          phone: '13684619450',
          job: '柜员'
        }
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
.el-card {
  margin-bottom: 30px;
}
</style>
